<template>
	<view>
		<view class=" nav space-between center">
			<u-tabs
				@click="clicktab"
				:list="list4"
				lineWidth="20"
				lineHeight="7"
				:lineColor="`url(${lineBg}) 100% 100%`"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			></u-tabs>
			<view class="all" @click="toSearchPage">
				<text>查看更多</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<view>
			<view class="dtitem" v-for="(item, index) in courseData" :key="index">
				<view class="space-between center">
					<view class="row">
						<view><image class="rr" :src="item.userInfo.headimgurl"></image></view>
						<view class="dtitem-a">
							<view class="center dtitem-aa">
								<view class="dtitem-name">{{ item.userInfo.nickname_pl }}</view>
								<view>
									<image v-if="item.userInfo.gender == '女'" class="sex" src="/static/images/nv.png"></image>
									<image v-else class="sex" src="/static/images//nan.png"></image>
								</view>
							</view>
							<view class="dtitem-time">{{ item.create_time }}</view>
						</view>
					</view>
					<!-- <view><view class="qzt center" @click="phone(item.userInfo.phone)">去找Ta</view></view> -->
				</view>
				<view class="dtitme-c">{{ item.content }}</view>
				<view style="margin-top: 20rpx;" class="zdhh">
					<view style="margin-right: 20rpx;margin-top: 10rpx;" v-for="(itemt, indext) in item.img" :key="indext"><image class="dtitme-d" :src="itemt"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const lineBg = '/static/images/hk.png';

export default {
	components: {},
	data() {
		return {
			lineBg,
			list4: [
				{
					name: '推荐动态'
				},
				{
					name: '最新动态'
				}
			]
		};
	},

	methods: {
		clicktab(item) {
			if (item.name == '推荐动态') {
				this.$emit('sfcx', 1);
			} else {
				this.$emit('sfcx', 2);
			}
		},
		phone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// 跳转到搜索页查询对应数据
		toSearchPage() {
			this.navTo('/pages/zxhd/dtlist');
		}
	},
	props: {
		name: {
			type: String,
			default: '相亲活动'
		},

		courseData: {
			type: Array
		}
	}
};
</script>

<style scoped lang="scss">
.zdhh {
	display: flex;
	flex-wrap: wrap;
}
.list-swiper {
	height: 520rpx !important;
}
.nav {
	// background: red;
}

.dtitem {
	width: 690rpx;
	min-height: 402rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(6, 0, 1, 0.1);
	border-radius: 18rpx;
	padding: 30rpx;
	margin-top: 30rpx;
}
.rr {
	width: 88rpx;
	height: 88rpx;
	border-radius: 88rpx;
}
.dtitem-a {
	margin-left: 20rpx;
}
.dtitem-aa {
	margin-top: 5rpx;
}
.dtitem-name {
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #333333;
}
.dtitem-time {
	margin-top: 10rpx;
	font-size: 20rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #9e9d9d;
}
.sex {
	width: 26rpx;
	height: 26rpx;
}
.all {
	font-weight: normal;
	color: $mxg-text-color-grey;
	font-size: 28rpx;

	.iconfont {
		font-size: 25rpx;
	}
}

.qzt {
	background: linear-gradient(to top right, #f35050, #fe9361);

	width: 142rpx;
	height: 42rpx;
	border-radius: 42rpx;
	// background: #FFFFFF;

	font-size: 20rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #fefefe;
}

.dtitme-c {
	margin-top: 10rpx;
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #333333;
}

.dtitme-d {
	width: 190rpx;
	height: 190rpx;

	border-radius: 18rpx;
}
</style>
